<template>
  <view>
    <view>default</view>
    <image class="size1" style="width:120px;height:40px;" src="/static/dcloud.png" />
    <view>widthFix</view>
    <image class="size2" style="width:120px;" mode="widthFix" src="/static/dcloud.png" />
    <view>heightFix</view>
    <image class="size3" style="height:40px;" mode="heightFix" src="/static/dcloud.png" />
    <view>event</view>
    <view>
      loadInfo:
      <text class="load-info">{{loadInfo}}</text>
    </view>
    <view>
      errorInfo:
      <text class="error-info">{{errorInfo}}</text>
    </view>
    <image
      class="event"
      @load="load"
      @error="error"
      style="width:100px;height:0;"
      mode="widthFix"
      :src="src"
    />
    <button @click="src='/static/logo.png'">src='/static/logo.png'</button>
    <button @click="src='error'">src='error'</button>
    <button @click="src=''">src=''</button>
    <image class="mode" style="width:100px;height:0;" :mode="mode" src="/static/logo.png" />
    <button @click="mode='widthFix'">mode='widthFix'</button>
    <button @click="mode='scaleToFill'">mode='scaleToFill'</button>
    <view>image base64</view>
    <image class="size100" :src="base64" />
    <view>img base64</view>
    <img class="size100" :src="base64" />
    <view>background-image base64</view>
    <view class="size100 background background1"></view>
    <view
      class="size100 background2"
      :style="style"
    ></view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      src: '',
      mode: 'widthFix',
      width: 0,
      height: 0,
      loadInfo: '',
      errorInfo: '',
      // 含有 1upx
      base64: ``
    }
  },
  computed:{
    style(){
      return `background-image: url("${this.base64}");background-size: 100% 100%;`
    }
  },
  methods: {
    load (event) {
      console.log(event)
      this.loadInfo = `${event.detail.width},${event.detail.height}`
    },
    error (event) {
      console.log(event)
      this.errorInfo = event.detail.errMsg
    }
  }
}
</script>

<style>
.size100 {
  width: 100px;
  height: 100px;
}
.background {
  background-image: url("");
  background-size: 100% 100%;
}
</style>